<template>
  <view class="work-list">
    <view class="tab flex">
      <view :class="tabIndex == 0 ? 'ac' : ''" @click="tabIndex = 0">
        已上架
      </view>
      <view :class="tabIndex == 1 ? 'ac' : ''" @click="tabIndex = 1">
        已下架
      </view>
    </view>
    <view class="flex1 over">
      <scroll-view scroll-y="true" style="height: 100%">
        <view class="wrap">
          <view class="box" v-for="item in 10" @click="toRoute('/work-detail')">
            <view class="flex">
              <image
                class="thumb"
                src="@/static/demo.jpg"
                mode="aspectFit"></image>
              <view class="flex1">
                <view class="t ellipsis-2">1111111111</view>
                <view class="t1">作品分类</view>
                <view class="price">
                  <text>￥</text>
                  29.00
                </view>
              </view>
            </view>
            <view class="flex w">
              <view class="">下架</view>
              <view class="">修改</view>
            </view>
          </view>
          <u-loadmore :status="product_loadmore_status" />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabIndex: 0,
      product_loadmore_status: "loadmore", //loadmore  / loading / nomore
    };
  },
};
</script>

<style lang="scss" scoped>
.work-list {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  .tab {
    background: #fff;

    & > view {
      width: 50%;
      padding: 24upx 0;
      font-size: 28rpx;
      color: #000000;
      text-align: center;
    }
    .ac {
      border-bottom: 2upx solid #f49c0d;
    }
  }
  .wrap {
    padding: 24upx 32upx;
    .box {
      padding: 40upx 24upx;
      background: #fff;
      margin-bottom: 24upx;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      .thumb {
        width: 168rpx;
        height: 168rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-right: 24upx;
      }
      .t {
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        margin-bottom: 8upx;
      }
      .t1 {
        font-size: 24rpx;
        color: #000000;
        margin-bottom: 6upx;
      }
      .price {
        font-weight: bold;
        font-size: 32rpx;
        color: #e23410;
        & > text {
          font-weight: 400;
          font-size: 20rpx;
          color: #e23410;
        }
      }
    }
    .w {
      justify-content: flex-end;
      & > view {
        width: 160rpx;
        height: 64rpx;
        background: #f49c0d;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        text-align: center;
        line-height: 64upx;
        font-size: 24rpx;
        color: #ffffff;
        margin-left: 24upx;
      }
    }
  }
}
</style>
